<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 1034 1024"
    preserveAspectRatio="xMidYMid meet"
    fill=""
    role="presentation"
    ref="host"
  >
    <g><path d="M982.354 980.306c-6.82 0-13.312-2.048-19.456-5.796-.338-.348-.676-.686-1.362-.686l-443.054-324.27-442.706 324.27c-9.216 6.83-21.842 4.782-28.672-4.434-6.83-9.216-4.782-21.852 4.434-28.672L506.88 607.57c7.168-5.12 17.07-5.12 24.238 0l453.284 332.124c10.24 1.024 18.432 9.892 18.432 20.48 0 10.916-9.216 20.132-20.48 20.132zm6.492-589.476c-3.42 0-7.168-1.024-10.24-2.734L754.688 258.048c-9.902-5.806-12.974-18.094-7.506-27.986 5.458-9.902 18.084-12.974 27.986-7.516l223.918 130.048c9.892 5.806 12.964 18.094 7.506 27.996a20.48 20.48 0 0 1-17.746 10.24zm-940.718 0c-7.168 0-13.998-3.758-17.746-10.588a20.705 20.705 0 0 1 7.844-27.986l215.04-120.832a20.705 20.705 0 0 1 27.996 7.854c5.458 9.892 2.048 22.18-7.854 27.986L58.368 388.096c-3.41 2.048-6.83 2.734-10.24 2.734z" data-follow-fill="#0389FF" :fill="_fill"/><path d="M982.354 980.306H55.634a34.96 34.96 0 0 1-34.816-34.816V379.218c0-2.048.348-3.748.686-5.12.338-2.724 1.362-5.12 2.386-6.82 0-.348.348-.686.686-1.372 1.024-2.724 2.386-5.12 4.434-7.168l2.734-2.724c1.362-1.372 3.072-2.396 4.096-3.072.686-.348 1.362-1.024 2.048-1.372 2.734-1.7 5.458-2.724 7.854-3.41h.338c3.758-1.362 7.168-1.362 8.53-1.362h1.024c1.71 0 3.072 0 4.096.338 1.71 0 3.072.338 4.096.686a19.456 19.456 0 0 1 9.564 3.748c.338 0 .676.348.676.686.686.338 1.71 1.024 2.396 1.362l398.674 293.55c9.216 6.83 10.926 19.456 4.434 28.672-6.82 9.216-19.456 10.926-28.672 4.434L61.778 394.24v545.106H976.21v-546.13L587.438 679.25c-9.216 6.83-21.852 4.782-28.672-4.434-6.83-9.216-4.782-21.842 4.434-28.672l399.022-293.55a8.192 8.192 0 0 1 3.748-2.048c1.71-1.024 3.42-1.7 5.12-2.386l3.072-1.024c1.024-.338 2.048-.338 3.758-.686 2.386-.338 4.096-.338 5.12-.338h1.024c1.71 0 3.41.338 4.782.686.676 0 1.362.338 2.048.338 3.41.338 6.144 1.71 8.868 3.41 2.048 1.024 4.444 2.396 6.83 4.782l2.048 2.048c1.024 1.024 2.048 2.386 3.072 3.758 1.024 1.362 1.71 3.072 2.386 4.772v.348c.686 1.7 1.372 3.072 2.048 4.772 0 .348.348.686.348 1.024.676 2.396 1.362 4.782 1.362 7.854V945.49c-.686 19.118-16.384 34.816-35.502 34.816zm6.144-590.5h1.71-1.71zM33.106 354.99c-.338 0-.338.338-.676.676.338-.338.676-.338.676-.676z" data-follow-fill="#0389FF" :fill="_fill"/><path d="M764.928 543.058c-11.264 0-20.48-9.216-20.48-20.48l-.686-438.272H282.624v433.838c0 11.264-9.216 20.48-20.48 20.48s-20.48-9.216-20.48-20.48V63.826c0-11.264 9.216-20.48 20.48-20.48h502.098c11.264 0 20.48 9.216 20.48 20.48l.686 458.752c0 11.264-9.216 20.48-20.48 20.48z" data-follow-fill="#0389FF" :fill="_fill"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class Iconc8 extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
